<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/common/includes.jsp" %>

<!DOCTYPE html>
<html lang="${currentLocale}" class="ng-app:topicViewModule" id="ng-app" ng-app="topicViewModule" xmlns:ng="http://angularjs.org">
<head>
	<title>zzzzzz - </title>
	<%@ include file="/WEB-INF/common/meta.jsp" %>
	<%@ include file="/WEB-INF/common/global_res.jsp" %>
	<!--[if lte IE 8]>
      <script>
        document.createElement('ng-include');
        document.createElement('ng-pluralize');
        document.createElement('ng-view');
 
        // Optionally these for CSS
        document.createElement('ng:include');
        document.createElement('ng:pluralize');
        document.createElement('ng:view');
      </script>
    <![endif]-->
    <script>
    	var ctx = '${ctx}';
    	var topicId = '${topicId}';
    </script>
</head>
<body>

<%@ include file="/WEB-INF/common/header.jsp" %>

<div class="container">
	<div class="row">
		<div class="span8">
			<div id="topicSpan">
				<h3 class="topic-title">${topic.title}</h3>
				<div class="topic-text">
					<p>
						${topic.text}
						<br/>
						<img src="${ctx}/image/${topic.imgSId}" class="img-rounded" style="margin-right:10px;" />
					</p>
				</div>
				<div class="topic-viewpoint well well-small">
					<a href="#"><img src="${ctx}/image/${topic.userBase.thumbnailId}" class="thumb thumb_32 img-rounded" style="margin-right:10px;" />${topic.userBase.username}</a> 
					<i class="icon-time" style="margin-left: 10px;"></i> ${topic.updDt}
	
					<p style="margin: 10px 0 10px 0;">
						${topic.commentText}
					</p>
					
					<button type="button" class="btn">
						<i class="icon-heart"></i> 我有同感
					</button>
				</div>
			</div>
			<div id="commentSpan" ng-controller="CommentController">
				<form name="commentFormElm">
				    <fieldset>
				        <legend>
				            	回覆
				        </legend>
				        <div ng-class="'alert alert-'+message().type" ng-show="message().show">
					        <button type="button" class="close" ng-click="message().show=false">×</button>
					        <msg key-expr="message().text"></msg>
					    </div>
				        <textarea name="text" rows="3" cols="3" ng-model="commentForm.text" ng-required="true" ng-minlength="3" placeholder="请文明发言"></textarea>
						<span class="error" ng-show="commentFormElm.text.$error.required">Required!</span>
						<span class="error" ng-show="commentFormElm.text.$error.minlength">Too short!</span>
				        <label></label>
				        <button type="submit" class="btn" ng-click="save()">
				            	提交
				        </button>
				    </fieldset>
				</form>
				<br/>
				<div>
					<ul>
						<li ng-repeat="comment in comments"><a href="{{comment.userId}}"><img ng-src="${ctx}/image/{{comment.userBase.thumbnailId}}" class="thumb thumb_32 img-rounded" style="margin-right:5px;" /></a>{{comment.userBase.username}}&nbsp;&nbsp;{{$index+1}}# <br/> {{comment.text}}</li>
					</ul>
					<button class="btn" ng-click="loadMore()">
				         {{commentsRemain}}
				    </button>
				</div>
			</div>
		</div>
		<div class="span4">
			
		</div>
	</div>
</div>

<%@ include file="/WEB-INF/common/footer.jsp" %>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"></script>
<script type="text/javascript" src="${ctx}/res/js/content/topicView.js"></script>
<script type="text/javascript" src="${ctx}/res/js/json2.js"></script>
</body>
</html>